<template>
    <div>
        <header>{{ "名称" }}</header>
        <p>
            <span>共{{ data.total_number }}题，答对{{ data.right_number }}题，答错{{ data.wrong_number }}题，分数为：</span>
            <span style="color: #DC132C">{{ data.student_score }}</span>
        </p>
        <n-scrollbar style="max-height: 54vh" trigger="none">
            <div class="topic" v-for="index in data.children">
                <p class="title">
                    <span>{{ index.number }} .  </span>
                    <span>{{ index.question }}</span>
                </p>
                <p class="option">A: {{ index.A }}</p>
                <p class="option">B: {{ index.B }}</p>
                <p class="option">C: {{ index.C }}</p>
                <p class="option">D: {{ index.D }}</p>

                <p class="answer">正确答案: {{ index.answer }}</p>
                <p class="answer">学生回答: {{ index.student_answer }}</p>
            </div>
        </n-scrollbar>
    </div>
</template>

<script setup>
const props = defineProps(["data"])
</script>

<style scoped lang="less">
.topic {
    margin-bottom: 20px;

    .title {
    }

    .option {
        margin: 3px 18px;
    }

    .answer {
        margin-top: 10px;
    }
}
</style>